:root {
    /* Primitives: colors */
    --color-black: #000;
    --color-white: #fff;
    --color-gray-100: #f3f4f6;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7080;
    --color-gray-900: #1e1e1e;
    --color-midnight-blue-400: #3488c8;
    --color-midnight-blue-500: #1566a2;
    --color-violet-500: #8b5cf6;
    --color-violet-600: #7c3aed;
    --color-violet-700: #6d28d9;
    --color-zinc-100: #f4f4f5;
    --color-zinc-200: #e4e4e7;
    --color-zinc-400: #a1a1aa;
    --color-zinc-800: #27272a;
    --color-zinc-900: #18181b;
    /* Text colors */
    --color-text-default: var(--color-zinc-900);
    --color-text-muted: var(--color-gray-500);
    --color-text-disabled: var(--color-gray-400);
    --color-text-inverse: var(--color-gray-100);
    --color-text-accent: var(--color-midnight-blue-500);
    --color-text-accent-hover: var(--color-midnight-blue-400);
    --color-text-primary: var(--color-violet-600);
    /* Background colors */
    --color-background-default: var(--color-white);
    --color-background-subtle: var(--color-zinc-100);
    --color-background-inverse: var(--color-zinc-900);
    --color-background-primary: var(--color-violet-700);
    /* Buttons colors */
    --color-background-button-primary: var(--color-violet-700);
    --color-background-button-primary-hover: var(--color-violet-500);
    --color-background-button-light: var(--color-zinc-100);
    --color-background-button-light-hover: var(--color-zinc-200);
    /* Border colors */
    --color-border-default: var(--color-zinc-400);
    --color-border-primary: var(--color-violet-600);
    /* Corner radius */
    --display-corner-radius-xs: 0.25rem;
    --display-corner-radius-sm: 0.5rem;
    --display-corner-radius-md: 0.75rem;
    /* Buttons spacing */
    --button-padding-x: var(--display-insets-md);
    --button-padding-y: var(--display-insets-sm);
    --button-large-padding-x: var(--display-insets-xl);
    --button-large-padding-y: var(--display-insets-md);
    /* General spacing */
    --main-padding: 3rem;
}